<div class=" navbar navbar-default navbar-fixed-top" id="publicHeaderApp" th:fragment="head">
    <div class="container-fluid">

        <div class="row">
            <div class="col-md-12 text-center" style="background-color: cornflowerblue; color: white">
                <a th:href="@{/}" style="color: white"><h3>蜗牛购物</h3></a>
            </div>
        </div>

        <div class="row" style="margin-top: 10px">
            <div class="col-md-6">
                <ol class="breadcrumb">
                    <li v-for="goodsType in goodsTypeList">
                        <a href="" @click.prevent="toTypePage(goodsType.id)" v-text="goodsType.typeName">IT</a>
                    </li>
                </ol>
            </div>

            <div class="col-md-3">
                <form class="form-inline">
                    <div class="form-group">
                        <input type="text" name="searchName" class="form-control" id="search" placeholder="请输入搜索关键词">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
            </div>

            <div class="col-md-3">
                <a v-if="!isLogin" class="btn btn-default btn-sm" href="/login.html">登录</a>
                <a v-if="!isLogin" class="btn btn-default btn-sm" href="/register.html">注册</a>
                <span v-if="isLogin" >{{isLogin}},欢迎使用!</span>
                <a v-if="isLogin" class="btn btn-default btn-sm" href="/myCart.html">我的购物车</a>
                <a v-if="isLogin" class="btn btn-default btn-sm" href="/myOrder.html">我的订单</a>
                <a v-if="isLogin" class="btn btn-default btn-sm" href="" @click.prevent="logout">退出</a>
            </div>

        </div>

    </div>

</div>
<script>
    let goodsTypeList = new Vue({
        el: "#publicHeaderApp",
        data: {
            goodsTypeList: [],
            isLogin:''
        },
        methods: {
            initGoodsType() {
                $.get('/productType/getProductTypeList', data => {
                    this.goodsTypeList = data
                })
            },
            toTypePage(id) {
                sessionStorage.setItem("typeId",id);
                $.get('/product/getPageList', {typeId: id}, data => {
                    location.href='/goodsOfType.html'
                })
            },
            isToLogin(){
                $.get('/user/isLogin', data => {

                   this.isLogin = data;
                })
            },
            logout(){
                $.get('/user/logout', data => {
                    location.href='/'
                })
            }
        },
        created() {
            this.initGoodsType()
            this.isToLogin()
        }
    })
</script>